<template>
  <div class="margin-container-list">
    <div style="margin-bottom: 15px">
      <el-input @keyup.enter.native="handleSearch" v-model="shareFormListQuery.nickname" placeholder="姓名/手机号" style="width: 200px"></el-input>
      <el-date-picker
        v-model="starEndTime"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        unlink-panels
        range-separator="至"
        start-placeholder="提交时间"
        end-placeholder="提交时间">
      </el-date-picker>
      <el-button type="primary" plain="" @click="handleSearch">查询</el-button>
    </div>
    <div style="margin-bottom: 15px">
      <el-button type="warning" plain size="small" class="finance-add-btn" @click="exportBacthRanking">全部导出</el-button>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="shareFormList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column width="55px" type="selection" align="center"></el-table-column>
        <el-table-column label="姓名" prop="nickname">
        </el-table-column>
        <el-table-column label="累计推广人数" prop="extensionNum">
        </el-table-column>
        <el-table-column label="获得酬金" prop="amount">
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="shareFormListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="shareFormListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style scoped>
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名
  import { pagingRankingList, exportBacthRanking } from '@/api/content/shareForm'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    name: getNameByPath(),
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      contentId: {
        type: String
      }
    },
    data() {
      return {
        shareFormList: [],
        starEndTime: [],
        total: null,
        listLoading: true,
        multipleSelection: [],
        shareFormListQuery: {
          currentPage: 1,
          size: 10,
          nickname: '',
          contentId: this.contentId
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initPage()
    },
    methods: {
      initPage() {
        this.listLoading = true
        pagingRankingList(this.shareFormListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.shareFormList = response.data.records
          this.total = response.data.total
        })
      },
      exportBacthRanking() {
        window.open(exportBacthRanking(this.shareFormListQuery), '_blank')
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.shareFormListQuery.ascs = 'createTime'
            this.shareFormListQuery.descs = ''
          } else {
            this.shareFormListQuery.ascs = ''
            this.shareFormListQuery.descs = 'createTime'
          }
        }
        this.initPage()
      },
      handleSearch() {
        this.shareFormListQuery.currentPage = 1
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.shareFormListQuery.startTime = this.starEndTime[0]
            this.shareFormListQuery.endTime = this.starEndTime[1]
          }
        } else {
          this.shareFormListQuery.startTime = ''
          this.shareFormListQuery.endTime = ''
        }
        if (this.shareFormListQuery.nickname) {
          this.shareFormListQuery.nickname = this.shareFormListQuery.nickname.valueOf().trim()
        }
        this.initPage()
      },
      handleSizeChange(val) {
        this.shareFormListQuery.size = val
        this.initPage()
      },
      handleCurrentChange(val) {
        this.shareFormListQuery.currentPage = val
        this.initPage()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    },
    mounted() {
    }
  }
</script>
